<template>
  <div>
    <el-form :inline="true"
             :model="condition"
             class="search-form"
             label-width="100px">
      <el-row>
        <el-col :span="7" class="search-width6">
          <el-form-item label="计费规则名称">
            <el-input v-model="condition['search_LIKE_feeRuleName']"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="search-width4">
          <el-form-item label="业务模式" label-width="80px">
            <el-select v-model="condition['search_EQ_businessModule']"
                       placeholder="请选择业务模式"
                       clearable>
              <el-option v-for="[key, val] in _dictBusinessModule"
                         :key="key"
                         :label="val"
                         :value="key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button v-if="power('WPTMGR_BASEMGR_CHARGINGRULE:QUERY')"
                     class="ml-80"
                     type="primary"
                     @click="loadData">查 询
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row slot="status">
      <el-col :span="24">
        <el-button type="primary" v-if="power('WPTMGR_BASEMGR_CHARGINGRULE:ADD')"
                     @click="handleForm(false)">新 增</el-button>
      </el-col>
    </el-row>
    <el-table :data="list"
              v-loading="listLoading"
              border
              stripe
              max-height="500"
              class="mt-10">
      <el-table-column type="index"
                       label="序号"
                       fixed="left"
                       
                       width="55"></el-table-column>
      <el-table-column prop="feeRuleName"
                       label="计费规则名称"
                       
                       min-width="130">
        <template slot-scope="scope">
          <!-- <el-button type="text" @click="handleDetail(scope.row)"> -->
          {{ scope.row.feeRuleName }}
          <!-- </el-button> -->
        </template>
      </el-table-column>
      <el-table-column prop="businessModule"
                       label="业务模式"
                       
                       min-width="120">
        <template slot-scope="scope">
          {{ scope.row.businessModule | _filterBusinessModule }}
        </template>
      </el-table-column>
      <!--<el-table-column prop="rate" label="开票税率"  min-width="120"></el-table-column>-->
      <el-table-column prop="feeRuleDesc"
                       label="规则描述"
                       show-overflow-tooltip
                       
                       min-width="140"></el-table-column>
      <el-table-column prop="orgName"
                       label="所属单位"
                       
                       min-width="140"></el-table-column>
      <el-table-column prop="createBy"
                       label="创建人"
                       
                       min-width="120"></el-table-column>
      <el-table-column prop="createDateTime"
                       label="创建时间"
                       
                       min-width="160"></el-table-column>
      <el-table-column fixed="right"
                       align="center"
                       label="操作"
                       
                       width="140">
        <template slot-scope="scope">
          <el-button v-if="power('WPTMGR_BASEMGR_CHARGINGRULE:UPD')"
                     size="small"
                     type="text"
                     @click="handleForm(true,scope.row)">编辑
          </el-button>
          <el-button v-if="power('WPTMGR_BASEMGR_CHARGINGRULE:DEL')"
                     size="small"
                     class="danger"
                     type="text"
                     @click="handleDelete(scope.row)">删除
          </el-button>
          <el-button size="small"
                     type="text"
                     @click="handleSetRate(scope.row)">设置费率</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="bottom"
            justify="end"
            type="flex"
            v-show="total>0">
      <div class="oper">
      </div>
      <el-pagination class="page"
                     @size-change="size=>pageInfo.iDisplayLength=size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :current-page.sync="pageInfo.pageStart"
                     :page-sizes="pageInfo.pageArr"
                     :page-size="pageInfo.iDisplayLength"
                     :total="total">
      </el-pagination>
    </el-row>
    <rule-form v-if="dialogForm"
               ref="ruleForm"
               @load="loadData"></rule-form>
    <rate-form v-if="rateForm"
               ref="rateForm"
               @load="loadData"></rate-form>
    <!-- <rule-detail-form v-if="dialogForm" ref="ruleDetailForm"></rule-detail-form> -->
  </div>
</template>

<script>
import {
  getRuleList,
  getRuleId,
  getRuleIdRate,
  deleteRule
} from '@/api/balance/balance'
import ruleForm from './ruleFormNew'
import rateForm from './rateFormNew'
import ruleDetailForm from './ruleDetailForm'

export default {
  name: 'feeRule',
  components: {
    ruleForm,
    rateForm,
    ruleDetailForm
  },
  data() {
    return {
      condition: {},
      list: [],
      total: 0,
      pageInfo: this.$defalutPage(),
      listLoading: false,
      dialogForm: false,
      rateForm: false,
      created: true,
    }
  },
  mounted() {
    this.loadData()
  },
  activated() {
    if (!this.created) {
      this.loadData()
    }
  },
  methods: {
    loadData() {
      this.listLoading = true
      let params = this.$assist.copySearchConditions(this.condition)
      params.iDisplayStart = this.pageInfo.pageStart - 1
      params.iDisplayLength = this.pageInfo.iDisplayLength
      params.sortType = '-createDateTime'
      params.search_EQ_ruleType = 'fee'
      getRuleList(params).then(res => {
        this.created = false
        const data = res.data
        this.total = data.iTotalRecords
        this.listLoading = false
        this.list = data.aaData
      })
    },
    handleForm(bool, item) {
      this.dialogForm = true
      this.$nextTick(() => {
        if (bool) {
          getRuleId(item.id).then(res => {
            this.$refs.ruleForm.isEdit = true
            let data = res.data
            let arr = []
            for (let i = 0; i < data.feeRule.length; i++) {
              const el = data.feeRule[i]
              if (el.operator === 'in' || el.operator === 'nIn') {
                el.typeValue = el.typeValue.split(',')
              }
              arr.push({
                ...el,
                dataSource: [],
                list: []
              })
            }
            this.$refs.ruleForm.form = {
              ...data,
              feeRule: arr
            }
            this.$refs.ruleForm.dialogForm = true
            this.$refs.ruleForm.handleChangeModule(data.businessModule)
          })
        } else {
          this.$refs.ruleForm.dialogForm = true
        }
      })
    },
    handleDetail(item) {
      this.dialogForm = true
      getRuleId(item.id).then(res => {
        let data = res.data
        let arr = []
        for (let i = 0; i < data.feeRule.length; i++) {
          const el = data.feeRule[i]
          if (el.operator === 'in' || el.operator === 'nIn') {
            el.typeValue = el.typeValue.split(',')
          }
          arr.push({
            ...el,
            dataSource: []
          })
        }
        this.$refs.ruleDetailForm.form = {
          ...data,
          feeRule: arr
        }
        this.$refs.ruleDetailForm.dialogForm = true
        this.$refs.ruleDetailForm.getRule()
        this.$refs.ruleDetailForm.loadData(item.id)
        this.$refs.ruleDetailForm.getSource(0)
      })
    },
    handleSetRate(item) {
      this.rateForm = true
      this.$nextTick(() => {
        this.$refs.rateForm.dialogForm = true
        this.$refs.rateForm.loadData(item.id)
      })
    },
    handleDelete(item) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRule(item.id).then(res => {
          this.$message({ message: '删除成功!', type: 'success' })
          this.loadData()
        })
      })
    }
  }
}
</script>

<style scoped>
</style>
